<script setup lang="ts">
import { ref } from 'vue';
import { getCollectInfoApi, deleteCollectApi } from'@/apis/collect';
import { onLoad }from'@dcloudio/uni-app';
import type { SkuInfo } from'@/types/SkuModule';

// 获取数据
const collectData = ref<SkuInfo[]>()
const getCollectData = async() => {
  const res = await getCollectInfoApi()
  collectData.value = res.data
}

// 删除收藏
const handleRemove = (spuIds:number[]) => {
  // 弹窗二次确认
  uni.showModal({
    content: '是否删除',
    confirmColor: '#f14e4e',
    success: async (res) => {
      if (res.confirm) {
        // 后端删除单品
        await deleteCollectApi(spuIds)
        // 重新获取列表
        getCollectData()
      }
    },
  })
}

onLoad(() => {
  getCollectData()
})
</script>

<template>
    <scroll-view class="scroll-view" scroll-y>
      <view class="collect-list">
        <!-- 滑动操作分区 -->
          <uni-swipe-action >
          <!-- 滑动操作项 -->
          <view v-for="item in collectData" :key="item.skuId" class="collect-goods">
            <uni-swipe-action-item class="collect-swipe">
            <!-- 商品信息 -->
            <view class="collect">
              <!-- 选中状态 -->
              <navigator
                :url="`/pages/goods/goods?skuId=${item.skuId}`"
                hover-class="none"
                class="navigator"
              >
                <image
                  mode="aspectFill"
                  class="picture"
                  :src="item.skuDefaultImg"
                ></image>
                <view class="meta">
                  <view class="name ellipsis">{{ item.spuTitle }}</view>
                  <view class="price">{{ item.price }}</view>
                </view>
              </navigator>
            </view>
            <!-- 右侧删除按钮 -->
            <template #right>
              <view class="collect-swipe-right">
                <view class="view delete-view" @tap="handleRemove([item.spuId])">删除</view>
              </view>
            </template>
            <!-- 右侧删除按钮 -->
          </uni-swipe-action-item>
          </view>
        </uni-swipe-action>
      </view>
    </scroll-view>
</template>

<style lang='scss'>
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgb(244, 245, 247);
}

.scroll-view {
  flex: 1;
}

.collect-list{
  padding: 0 18rpx;

  .collect-swipe {
    display: block;
  }

  .collect-goods{
    padding: 8rpx;
    background-color: #fff;
    border-radius: 13rpx;
    margin: 20rpx 0;
  }

  .collect{
    display: flex;
    padding: 20rpx;
    border-radius: 10rpx;
    position: relative;
    margin-bottom: 15rpx;

    .navigator {
      display: flex;
    }

    .picture{
      width: 170rpx;
      height: 170rpx;
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20rpx;
    }

    .name {
      height: 72rpx;
      font-size: 26rpx;
      color: #444;
    }

    .price {
      line-height: 1;
      font-size: 36rpx;
      color: #f04848;
      &::before {
        content: '￥';
        font-size: 80%;
      }
    }
  }

  .collect-swipe-right {
    display: flex;
    height: 100%;

    .view {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80rpx;
      padding: 6rpx;
      line-height: 1.5;
      color: #fff;
      font-size: 26rpx;
      border-radius: 0;
    }

    .delete-view {
      background-color: rgb(254, 54, 57);
      border-top-right-radius:10rpx ;
      border-bottom-right-radius:10rpx ;
    }
  }
}
</style>